<template>
  <div>
    <div class="tip">使用微信扫码登录</div>
    <div class="use-other" @click="changeLogin">
      <a href="javascript:void (0)" class="use-other"></a>
    </div>
    <div
        v-loading="loading"
        class="box-top flex-center-center">
      <div class="box-item">
        <div class="box-title flex-center-between">
          <div @click="change(0)" :class="{active:active===0}" class="title flex-center-center"><a href="javascript:void (0)">短信登录</a></div>
          <div  @click="change(1)" :class="{active:active===1}" class="title flex-center-center"><a href="javascript:void (0)">账号登录</a></div>
        </div>
        <div class="qr-code">
            <lz-inputs v-model="form.phone"></lz-inputs>
            <lz-inputs type="password" v-model="form.pwd" v-if="active===1"></lz-inputs>
            <lz-inputs type="code" v-model="form.code"></lz-inputs>
          <div class="input-box">
            <a class="submit" v-routers="{path:'/'}" @click="submit" href="javascript:void (0)">登录/注册</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        loading:false,
        active:0,
        form:{
          phone:'',
          pwd:'',
          code:''
        }
      }
    },
    methods:{
      change(item){
        this.active = item
      },
      submit(){
        console.log(this.form)
        this.loading=true
        setTimeout(()=>{
          this.loading=false
        },2000)
      },
      changeLogin(){
        this.$emit('changeBtn',0)
      }
    }
  }
</script>

<style scoped lang="scss">
.tip{
  width: 120px;
  height: 40px;
  font-size: 12px;
  background: url('@/assets/images/qp.png') no-repeat;
  background-size: 100%;
  background-position: center center;
  line-height: 40px;
  text-align: center;
  color: #fa709a;
  position: absolute;
  right: 80px;
  top: 20px;
}
.use-other{
  width: 90px;
  height: 90px;
  background: url('@/assets/images/qr.png') no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0;
  border-bottom-right-radius: 6px;
}
.box-top{
  width: 500px;
  height: 435px;
  .box-item{
    width: 360px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .box-title{
      text-align: center;
      width: 100%;
      height: 40px;
      margin-top: 50px;
      font-size: 16px;
      .title{
        width: 50%;
        height: 40px;
        color: #999999;
        a{
          color: #999999;
        }
      }
      .active{
        width: 50%;
        a{
          color: #fa709a;
        }
      }
    }
    .qr-code{
      width: 320px;
      height: 250px;
      margin-top: 10px;
      background-size: cover;
      .input-box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 18px 0 20px 0;
        .inputs{
          width: 100%;
          height: 45px;
          border: 1px solid #fa709a;
          border-radius: 8px;
          .icon{
            height: 24px;
          }
          input{
            width: 100%;
            font-size: 16px;
            text-indent: 10px;
            color: #666666;
          }
          input::placeholder{
            color: #999999;
            font-size: 14px;
          }
          a{
            display: flex;
            height: 45px;
            align-items: center;
            color: #333;
          }
        }
        .yzm{
          width: 50%;
        }
        .btn{
          display: flex;
          width: 150px;
          height: 45px;
          font-size: 14px;
          color: #fff;
          background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
          border-radius: 8px;
          justify-content: center;
          align-items: center;
        }
        .submit{
          margin-top: 10px;
          width: 100%;
          display: flex;
          height: 45px;
          color: #fff;
          font-size: 14px;
          background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
          border-radius: 8px;
          justify-content: center;
          align-items: center;
        }
      }


    }
    .box-tips{
      width: 100%;
      text-align: center;
      margin-top: 10px;
      p{
        font-size: 13px;
        color: #999;
        margin-bottom: 3px;
      }
    }
  }
}
</style>